<template>
	<view>
		<u-navbar :title="$t('rest.input_1')" placeholder	 :autoBack="true" />
		<view class="content">
			<view class="box m-bottom-15">
				<view>
					<u--text :text="language=='zh'?detail.shopname:detail.shopname_copy?detail.shopname_copy:detail.shopname" bold size="19" lines="2" color="#000" margin="0 0 10px 0"></u--text>
					<u--text :text="timewhole(detail.reserve_time)" size="14" color="#989898" margin="0 0 10px 0"></u--text>
					<view class="flex from" v-if="detail.is_box == '1'">
						<text>{{$t('subscribe.deskNum')}}</text>
						<text class="mark">{{detail.num}}号</text>
					</view>
					<view class="flex from" v-if="detail.is_box == '0'">
						<text>包厢</text>
						<text class="mark">{{language == 'zh' ? detail.room_name : detail.room_name_copy}}</text>
					</view>
				</view>
				<u--image :src="detail.shop_avatar" width="100%" height="250rpx" radius="10px"></u--image>
			</view>
			<view class="grade m-bottom-15">
				<view style="margin-right: 20rpx;">{{$t('rest.commentRate')}}</view>
				<u-rate :count="5" v-model="form.star" active-color="#FFC100" size="30"></u-rate>
			</view>
			<view class="evaluate m-bottom-15">
				<view>{{$t('rest.input_1')}}</view>
				<u--textarea v-model="form.content" :placeholder="$t('rest.searchInput_1')" border="none" ></u--textarea>
			</view>
			<view class="uploading">
				<view>{{$t('rest.input_2')}}</view>
				<upload maxNum="6" @removeImage="deleteImage" @successImage="setImage"></upload>
			</view>
			<view class="footer">
				<view class="btn">
					<u-button :text="$t('rest.submitBtn')" shape="circle" :customStyle="btnStyle" @click="submit"></u-button>
				</view>
				<view class="safe_height_bottom"></view>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import graceChecker from '@/mixins/formVerify.js'
	export default {
		data() {
			return {
				detail:{},
				btnStyle: {
					background: "#FFC100",
					border: "none",
					height: "90rpx"
				},
				form:{
					star:"",
					content:"",
					images:[],
					order_no:"",
					shop_id:""
				},
				rule:{
					star: {
						type: String,
						required: true,
						message: "请选择星级评分"
					},
					content:{
						type: String,
						required: true,
						message: "请填写评价"
					}
				}
			};
		},
		onLoad(event) {
			this.detail=JSON.parse(event.item)
			this.form.shop_id=this.detail.shop_id
			this.form.order_no=this.detail.order_no
		},
		computed: {
			language() {
				return this._i18n.locale
			}
		},
		methods:{
			submit(){
				let transit = graceChecker.RuleValidation(this.form, this.rule);
				if(transit){
					this.form.images=this.form.images.toString()
					uni.showLoading({
						title:"加载中...",
						mask:true
					})
					this.$http.post('wanlshop/order/commentOrders', this.form).then(res => {
						uni.hideLoading()
						if (res.code == 1) {
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: "评论成功",
									duration: 1000,
									complete() {
										uni.switchTab({
											url:'/pages/order/index'
										})
									}
								})
							}, 150)
						}
					})
				}
			},
			deleteImage(event){
				this.form.images.splice(event.index,1)
			},
			setImage(event){
				this.form.images.push(event.data.url)
			}
		}
	}
</script>
<style>
	page {
		background-color: #f7f6fb;
	}
</style>
<style lang="scss" scoped>
	/deep/.u-textarea{
		padding: 0 !important;
	}
	.content {
		padding: 30rpx;

		.box {
			padding: 40rpx;
			background-color: #fff;
			border-radius: 30rpx;
			display: grid;
			grid-template-columns: auto 160px;
			grid-column-gap: 20rpx;

			.from {
				color: #989898;
				font-size: 28rpx;
				margin-top: 40rpx;

				.mark {
					color: #FFAC2A;
					margin-left: 40rpx;
				}
			}
		}
		.grade{
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			display: flex;
			align-items: center;
			color: #141414;
			font-size: 30rpx;
			font-weight: 400;
		}
		.uploading,
		.evaluate{
			padding: 30rpx;
			background-color: #fff;
			border-radius: 30rpx;
			display: grid;
			grid-template-columns: 70px auto;
			grid-column-gap: 20rpx;
			color: #141414;
			font-size: 30rpx;
			font-weight: 400;
		}
		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: #fff;
			border-top-left-radius: 35rpx;
			border-top-right-radius: 35rpx;
			box-sizing: border-box;
		
			.btn {
				padding: 20rpx 30rpx;
			}
		}
	}
</style>
